<template>
	<view class="container">
		<!--header-->
		<com-goods-list-header
			ref="goods_list_header"
			:options="headerOptions" 
			@onOrderChange = "orderChangeHandler"
			@onListStyleChange="opt => { goodsListOptions.isList = opt}">
		</com-goods-list-header>
		<!--header-->


		<!--list-->
		<view style="margin-top:200rpx;">
			<!-- list 商品列表 -->
			<view class="tui-product-list">
				<view class="tui-product-container" :style="{width: goodsListOptions.isList ? '100%' : '49.2%'}">
					<block v-for="(item,index) in goodsData.list" :key="index" v-if="(index+1)%2!=0 || goodsListOptions.isList">
						<view class="tui-pro-item" :class="[goodsListOptions.isList?'tui-flex-list':'']" hover-class="hover" :hover-start-time="150" @tap.stop="gotoDetail(item)">
							<view class="goods-cover">
								<image :src="item.product_img.url_list[0]" class="tui-pro-img" :class="[goodsListOptions.isList?'tui-proimg-list':'']"
								 mode="scaleToFill" />
								 <view class='store'>
									<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.nearest_poi.name}}</view>
									<!-- <view style="font-size: 8pt;" v-if="item.nearest_poi.distance">{{item.nearest_poi.distance}}km</view> -->
								 </view>
							</view>
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.name}}</view>
								<view>
									<view class="tui-pro-price flex flex-y-center">
										<view class="tui-sale-price" style="color:#C51A15;font-size: 10pt;"><text style="font-size: 9pt;">￥</text>{{parseFloat(item.price / 100)}}</view>
										<view class="tui-factory-price">￥{{parseFloat(item.origin_price / 100)}}</view>
									</view>
									<view class="goods-sales">已售{{item.sold_info.blurred_sold_count}}</view>
									
									<view style="color:#000000;font-size: 9pt;">
										预计送<span style="color: red;font-size: 12pt;margin: 0 10rpx;">{{shoppingPrice(item.price,item.commission_rate)}}</span>购物券
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="tui-product-container" v-if="!goodsListOptions.isList">
					<block v-for="(item,index) in goodsData.list" :key="index" v-if="(index+1)%2==0">
						<view class="tui-pro-item" :class="[goodsListOptions.isList?'tui-flex-list':'']" hover-class="hover" :hover-start-time="150" @tap.stop="gotoDetail(item)">
							 <view class="goods-cover">
							 	<image :src="item.product_img.url_list[0]" class="tui-pro-img" :class="[goodsListOptions.isList?'tui-proimg-list':'']"
							 	 mode="scaleToFill" />
							 	<view class='store'>
									<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.nearest_poi.name}}</view>
									<!-- <view style="font-size: 8pt;" v-if="item.nearest_poi.distance">{{item.nearest_poi.distance}}km</view> -->
							 	</view>
							 </view>
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.name}}</view>
								<view>
									
									<view class="tui-pro-price flex flex-y-center">
										<view class="tui-sale-price" style="color:#C51A15;font-size: 10pt;"><text style="font-size: 9pt;">￥</text>{{parseFloat(item.price / 100)}}</view>
										<view class="tui-factory-price">￥{{parseFloat(item.origin_price / 100)}}</view>
									</view>
									<view class="goods-sales">已售{{item.sold_info.blurred_sold_count}}</view>
			
									<view style="color:#000000;font-size: 9pt;">
										预计送<span style="color: red;font-size: 12pt;margin: 0 10rpx;"> {{shoppingPrice(item.price,item.commission_rate)}} </span>购物券
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			<!-- list 商品列表 -->
			
			<!--list-->
			<backTop :src="backTop.src" :scrollTop="backTop.scrollTop"></backTop>
			
			<!--加载loadding-->
			<main-loadmore :visible="loadding" :index="3" type="red"></main-loadmore>
			<main-nomore :visible="pullUpOn" bgcolor="#f7f7f7"></main-nomore>
			
		</view>
		<!--list-->

	</view>
</template>

<script>
	import comGoodsListHeader from "@/components/com/com-goods-list-header/com-goods-list-header";
	import backTop from '@/components/back-top/back-top.vue';
	export default {
		components: {
			comGoodsListHeader,
			backTop
		},
		data() {
			return {
				headerOptions:{//com-goods-list-header 配置
					goodsListPage:"/plugins/promotion/douyin",
					orderKey:[
						{
							key:'distance',
							name:'距离',
							value:''
						},
						{
							key:'shopping',
							name:'购物券',
							value:''
						},
						{
							key:'price',
							name:'价格',
							value:''
						},
						{
							key:'sales',
							name:'销量',
							value:''
						}
					],
				},
				goodsListOptions:{
					listDataApi:this.$api.promotion.douyinGoodsList,
					isList:false,
					queryParams:{},//获取数据的参数
				},
				goodsData:{
					list:[],
					cursor:'',
					has_more:false
				},
				pullUpOn:false,
				backTop: {
					src: '/static/back-top/top.png',
					scrollTop: 0
				},
				loadding:false,
				search_id:'',
			}
		},
		onLoad: function(opt){
			this.headerOptions.searchKeyword = opt.searchKey ?? '';
			this.goodsListOptions.queryParams.key_word = opt.searchKey ?? '';
			this.goodsListOptions.queryParams.longitude = uni.getStorageSync('x-longitude');
			this.goodsListOptions.queryParams.latitude = uni.getStorageSync('x-latitude');
			this.getList()
		},
		//监听当前页面滚动，并同步给子组件
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
		/* 触底调用子组件方法加载更多 */
		onReachBottom() {
			this.loadMore();
		},
		methods:{
			orderChangeHandler(opt){
				let param = {};
				for(let key in this.goodsListOptions.queryParams){
					if(this.goodsListOptions.queryParams[key]){
						param[key] = this.goodsListOptions.queryParams[key];
					}
				}
				param['order'] = JSON.stringify(opt);
				this.goodsListOptions.queryParams = param;
				this.resetParams();
				this.getList()
			},
			async getList(){
				this.loadding = true;
				let params = {
					page:this.goodsData.page,
					page_size:this.goodsData.pageSize,
					...this.goodsListOptions.queryParams
				};
				let res = await this.$http.request({
					url: this.goodsListOptions.listDataApi,
					method:'post',
					data:params,
				});
				this.loadding = false;
				if(res.code == 0){
					this.goodsData.list = this.goodsData.list.concat(res.data.product_list);
					this.goodsListOptions.queryParams.cursor = res.data.cursor ?? '';
					this.goodsData.has_more = res.data.has_more ?? false;
					if(!res.data.has_more){
						this.pullUpOn = true;
					}
				}
			},
			loadMore(){
				if(this.goodsData.has_more){
					this.getList();
				}
			},
			resetParams(){
				this.goodsData = {
					list:[],
					cursor:'',
					has_more:false
				};
			},
			async gotoDetail(goods){
				let id = goods.id;
				
				let res = await this.$http.request({
					url:this.$api.promotion.douyinPromotionUrl,
					method:'post',
					showLoading:true,
					data:{id}
				})
				this.loadding = false;
				if(res.code != 0){
					uni.showToast({title:res.message,icon:'none',duration:3000});
					return ;
				}
				let command = res.data.product_info.share_info.dy_password;
				let url = res.data.product_info.share_info.share_link;
				
				uni.showModal({
					title:'抖音口令',
					content:command,
					cancelText:'直接前往',
					confirmText:'复制口令',
					success: function (res) {
						if (res.confirm) {
							uni.setClipboardData({
								data: command,
								success: function () {
									uni.showToast({icon:'none',title:'口令复制成功，打开抖音APP即可进行购买'})
								}
							});
						} else if (res.cancel) {
							window.location.href = url;
						}
					}
				})
			}
		},
		computed:{
			//根据佣金比例计算送购物券比例
			//佣金比例大于15% 送 100% 购物券
			//佣金比例大于14% 送 90% 购物券
			//佣金比例大于13% 送 80% 购物券
			//佣金比例大于12% 送 70% 购物券
			//佣金比例大于11% 送 60% 购物券
			//佣金比例大于10% 送 50% 购物券
			//佣金比例大于9% 送 45% 购物券
			//佣金比例大于8% 送 40% 购物券
			shoppingPrice(price,ratio){
				return (price,ratio) =>{
					//douyin 佣金比例是千分比这里换算百分比。
					ratio = parseFloat(ratio / 100);
					//初始购物券比例
					let defShoppingRatio  = 100;
					//跟15%比例差多少
					let diff = Math.ceil(15 - ratio);
					
					if( diff > 0 && diff <= 5){
						defShoppingRatio = defShoppingRatio - (diff * 10)
					}else if(diff > 5 && diff <= 15){
						defShoppingRatio = defShoppingRatio - 25 - (diff * 5);
					}
					//pdd 价格单位为分，需要额外除 100
					return parseFloat(price * defShoppingRatio / 10000).toFixed(2);
				}
			}
		}
	}
</script>

<style lang="less">
	.tui-product-list {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}
	.tui-product-container {
		width: 48%;
	}
	
	.tui-product-container:last-child {
		margin-right: 0;
	}
	
	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #fff;
		box-sizing: border-box;
		/* border-radius: 12rpx; */
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}
	.tui-flex-list {
		display: flex;
		margin-bottom: 16rpx !important;
	}
	.goods-cover{
		position: relative;
	}
	.store{
		position: absolute;
		bottom:0;
		background-color: rgba(0,0,0,.4);
		width: 100%;
		color:#FFFFFF;
		padding:8rpx 15rpx;
		font-size: 10pt;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tui-pro-img {
		width: 100%;
		height: 360rpx;
		display: block;
	}
	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		/* border-radius: 12rpx; */
	}
	.store{
		position: absolute;
		bottom:0;
		background-color: rgba(0,0,0,.4);
		width: 100%;
		color:#FFFFFF;
		padding:8rpx 15rpx;
		font-size: 10pt;
	}
	.tui-pro-content {
		width:100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx 5rpx;
	}
	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 9pt;
		height: 72rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.tui-pro-price {
		padding-top: 5rpx;
		flex-wrap: wrap;
	}
	
	.tui-sale-price {
		font-size: 12pt;
		font-weight: 500;
		color: #e41f19;
		padding-right: 5rpx;
	}
	.tui-factory-price {
		font-size: 9pt;
		color: #a0a0a0;
		text-decoration: line-through;
	}
	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 9pt;
		color: #656565;
		display: flex;
		flex-wrap: wrap;
	}
	.tags{
		background-color: #C51A15;
		border-radius: 10rpx;
		padding: 4rpx 10rpx;
		color:#FFFFFF;
		margin:5rpx;
	}
	.goods-sales{
		font-size: 9pt;
		color: #a0a0a0;
	}
</style>
